import { defineComponent, ref } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { GaugeChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import "./EnvironmentMonitor.css";

use([GaugeChart, TitleComponent, TooltipComponent, CanvasRenderer]);

export default defineComponent({
  name: "EnvironmentMonitor",
  components: {
    VChart,
  },
  setup() {
    const aqiOption = ref({
      tooltip: {
        backgroundColor: "rgba(0, 0, 0, 0.8)",
        borderColor: "#00d4ff",
        borderWidth: 1,
        textStyle: {
          color: "#fff",
        },
      },
      series: [
        {
          type: "gauge",
          startAngle: 200,
          endAngle: -20,
          min: 0,
          max: 300,
          splitNumber: 6,
          itemStyle: {
            color: "#00d4ff",
          },
          progress: {
            show: true,
            width: 18,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              width: 18,
              color: [
                [0.17, "#00ff88"],
                [0.33, "#ffd700"],
                [0.5, "#ff9800"],
                [0.67, "#ff6b6b"],
                [0.83, "#b71c1c"],
                [1, "#7b1fa2"],
              ],
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            length: 15,
            lineStyle: {
              width: 2,
              color: "#999",
            },
          },
          axisLabel: {
            distance: 25,
            color: "#fff",
            fontSize: 12,
          },
          anchor: {
            show: false,
          },
          title: {
            show: false,
          },
          detail: {
            valueAnimation: true,
            width: "60%",
            lineHeight: 40,
            borderRadius: 8,
            offsetCenter: [0, "0%"],
            fontSize: 32,
            fontWeight: "bolder",
            formatter: "{value}",
            color: "#00d4ff",
          },
          data: [
            {
              value: 58,
              name: "AQI",
            },
          ],
        },
      ],
    });

    const envData = ref([
      {
        id: 1,
        label: "温度",
        value: "24.5",
        unit: "°C",
        icon: "🌡️",
        status: "normal",
      },
      {
        id: 2,
        label: "湿度",
        value: "65",
        unit: "%",
        icon: "💧",
        status: "normal",
      },
      {
        id: 3,
        label: "PM2.5",
        value: "32",
        unit: "μg/m³",
        icon: "🌫️",
        status: "good",
      },
      {
        id: 4,
        label: "噪音",
        value: "52",
        unit: "dB",
        icon: "🔊",
        status: "normal",
      },
    ]);

    return () => (
      <div class="environment-monitor">
        <div class="environment-monitor__header">
          <h3 class="environment-monitor__title">环境监测</h3>
        </div>

        <div class="environment-monitor__aqi">
          <VChart option={aqiOption.value} autoresize style="height: 180px; width: 100%;" />
          <div class="environment-monitor__aqi-label">空气质量指数</div>
          <div class="environment-monitor__aqi-status good">良好</div>
        </div>

        <div class="environment-monitor__data">
          {envData.value.map((item) => (
            <div key={item.id} class="environment-monitor__item">
              <div class="environment-monitor__item-icon">{item.icon}</div>
              <div class="environment-monitor__item-content">
                <div class="environment-monitor__item-label">{item.label}</div>
                <div class="environment-monitor__item-value">
                  {item.value}
                  <span class="environment-monitor__item-unit">{item.unit}</span>
                </div>
              </div>
              <div class={`environment-monitor__item-status ${item.status}`}>
                {item.status === "normal" ? "正常" : "优"}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  },
});
